<template>
	
	<div class="center" style="margin-top: 10%;">
		<van-image
			width="20rem"
			src="/logo.png"
		/>
	</div>	
		
	<div class="login">
		<div style="text-align: center; font-size: 30px;">登录</div>
		
		<van-form @submit="onSubmit">
		<div class="login" style="border: 1px solid lightskyblue;">
		  <van-cell-group inset>
		    <van-field
		      v-model="username"
		      name="用户名"
		      label="用户名"
		      placeholder="用户名"
		      :rules="[{ required: true, message: '请填写用户名' }]"
		    />
		    <van-field
		      v-model="password"
		      type="password"
		      name="密码"
		      label="密码"
		      placeholder="密码"
		      :rules="[{ required: true, message: '请填写密码' }]"
		    />
		  </van-cell-group>
		</div>
		  <div style="margin: 16px;">
			  <van-row gutter="20">
			    <van-col span="8">
					<van-button round block plain type="primary"  v-on:click="login" :to="{'name':'home'}">
					  登录
					</van-button>
				</van-col>
			    <van-col span="8">
					<van-button round block plain type="primary"  v-on:click="regist" :to="{'name':'regist'}">
					  注册
					</van-button>
				</van-col>
			    <van-col span="8">
					<van-button round block plain type="primary" :to="{'name':'home'}">
					  返回
					</van-button>
				</van-col>
			  </van-row>
		    
		  </div>
		</van-form>
	</div>
	
	
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { Toast } from 'vant';
	import 'vant/es/toast/style';
	
	var username = ref('');
	var password = ref('');
	
	function login(){
		console.log(username.value)
		console.log(password.value)
		Toast.success('登录成功');
	}
</script>

<style scoped>
	
	.login{
		width: 50%;
		padding-top: 1%;
		margin-top: 5%;
		margin-left: 25%;
		border: 4px solid darkgray;
		border-radius: 10px;
		
	}
	
</style>